<template>
  <view class="container">
    <view class="detail-form">
      <view class="header">
        <text class="title">订单介绍</text>
      </view>

      <view class="form-item">
        <text class="label">类型</text>
        <text class="data">{{ formData.carType }}</text> <!-- 替换input为text -->
      </view>

      <view class="form-item">
        <text class="label">截止时间</text>
        <text class="data">{{ formData.pickupTime }}</text> <!-- 替换input为text -->
      </view>

      <view class="form-item">
        <text class="label">详细描述</text>
        <view class="description-box">
          <text class="data" id="a">{{ formData.description }}</text> <!-- 替换textarea为text -->
        </view>
      </view>

      <button class="submit-btn" @click="handleSubmit">接单</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const formData = ref({
  carType: '前端',
  pickupTime: '2025年3月1日',
  description: '开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序'
})

// onMounted(() => {
//   const pages = getCurrentPages()
//   const currentPage = pages[pages.length - 1]
//   taskId.value = currentPage.$route.query.id // 获取路由参数

//   uni.request({
//     url: ``,
//     success: (res) => {
//       if (res.statusCode === 200) {
//         formData.value = res.data
//       }
//     }
//   })
// })

const goBack = () => {
  uni.navigateBack()
}

// 接单操作
// const handleSubmit = () => {
//   const token = uni.getStorageSync('token') // 从本地存储获取token
//   uni.request({
//     url: ``,
//     method: 'POST',
//     header: {
//       'Authorization': `Bearer ${token}`
//     },
//     success: (res) => {
//       if (res.statusCode === 200) {
//         uni.showToast({ title: '接单成功' })
//         setTimeout(() => uni.navigateBack(), 1500)
//       }
//     }
//   })
// }
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #CCD6E6;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin: 20rpx 0;
  background-color: #fff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.detail-form {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  justify-content: center;
}

.form-item {
  margin-top: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.text, .data {
  width: 100%;
  max-width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  font-size: 28rpx;
  display: block;
  color: #333;
  background-color: #f9f9f9;
  line-height: 80rpx;
   box-sizing: border-box;
}
	
#a{
	height:400rpx;
	overflow: auto;
	}

.submit-btn {
  background-color: #4169E1;
  color: #fff;
  margin-top: 60rpx;
  border-radius: 50rpx;

}
</style>
